<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
        <style>
             /*清除样式*/
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 2000px;
            }
            #d1{
                background-color: rgb(222, 221, 230);
                width: 500px;
                height: 100px;
                text-align: center;
            }
            .son{
                width: 100px;
                height: 50px;
                line-height: 50px;
                background-color: rgb(143, 206, 206);
                /*浮动，相对于父元素*/
                float: left;
                margin-right: 5px;
            }
            #d2{
                background-color: rgb(145, 139, 187);
                width: 500px;
                height: 100px;
                text-align: center;
            }
            .son1{
                width: 100px;
                height: 50px;
                line-height: 50px;
                background-color: rgb(143, 206, 206);
                float: right;
                margin-right: 5px;
            }
            #d3{
                position: relative;
                left: 10px;
                top: 10px;
                width: 100px;
                height: 100px;
                background-color: darkviolet;
                /* border-radius: 50px; */
                border-radius: 50px 50px 50px 50px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div class="son">左浮动</div>
            <div class="son">左浮动</div>
            <div class="son">左浮动</div>
        </div>
        <div id="d2">
            <div class="son1">左浮动</div>
            <div class="son1">左浮动</div>
            <div class="son1">左浮动</div>
        </div>
        <div id="d3"></div>
    </body>
</html>